<template>
  <div>
    <a-layout class="layout-demo">
      <a-layout-header
        style="
          height: 48px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          background-color: #fff;
          z-index: 999;
          box-shadow: rgba(0, 0, 0, 0.09) 0px 8px 8px;
        "
      >
        <div style="padding-left: 10px; width: 100px; height: 48px; line-height: 48px">
          <img
            src="../assets/img/aq.png"
            alt=""
            style="width: 30px; vertical-align: middle; padding-right: 10px"
          /><span style="font-weight: 900"> 十三区</span>
        </div>
        <div style="padding: 0px 50px 0 0">
          <a-space :size="15">
            <a-avatar :size="28">
              <icon-sun />
            </a-avatar>
            <a-popover>
              <a-avatar :size="32">
                <img src="../assets/img/avatar.png" alt="" style="vertical-align: top" />
              </a-avatar>
              <template #content>
                <a-button type="outline" status="warning" @click="qutiHandler">退出登录</a-button>
              </template>
            </a-popover>
          </a-space>
        </div>
      </a-layout-header>
      <a-layout style="overflow: auto">
        <a-layout-sider collapsible breakpoint="xl" style="padding-top: 10px">
          <a-menu
            :default-open-keys="['1']"
            :default-selected-keys="['0_3']"
            :style="{ width: '100%' }"
            @menu-item-click="onClickMenuItem"
          >
            <a-menu-item key="0_1" @click="$router.push('/Wel')">
              <IconCalendar></IconCalendar>
              欢迎
            </a-menu-item>
            <a-sub-menu key="1">
              <template #title> <IconCalendar></IconCalendar>咨询管理</template>
              <a-menu-item key="1_1" @click="$router.push('/ConsultManagement')"
                >咨询管理</a-menu-item
              >
              <a-menu-item key="1_2" @click="$router.push('/CategoriesManagement')"
                >分类管理</a-menu-item
              >
            </a-sub-menu>
            <a-sub-menu key="2">
              <template #title> <IconCalendar></IconCalendar>医生信息</template>
              <a-menu-item key="2_1" @click="$router.push('/PbcDpet')">科室列表</a-menu-item>
              <a-menu-item key="2_2" @click="$router.push('/TitlesList')">职称列表</a-menu-item>
              <a-menu-item key="2_3" @click="$router.push('/SpecialtyList')"
                >标签特长列表</a-menu-item
              >
              <a-menu-item key="2_4" @click="$router.push('/DoctorList')">医生列表</a-menu-item>
              <a-menu-item key="2_5" @click="$router.push('/HospitalList')">医院列表</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="3">
              <template #title> <IconCalendar></IconCalendar>物品信息</template>
              <a-menu-item key="3_1" @click="$router.push('/yaopinfenlei')">物品分类</a-menu-item>
              <a-menu-item key="3_2" @click="$router.push('/yaopinliebiao')">物品列表</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="4">
              <template #title> <IconCalendar></IconCalendar>轮播图管理</template>
              <a-menu-item key="4_1" @click="$router.push('/jibingfennei')">轮播图</a-menu-item>
              <a-menu-item key="4_2" @click="$router.push('/jibingliebiao')">药品列表</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="5">
              <template #title> <IconCalendar></IconCalendar>管理员信息</template>
              <a-menu-item key="5_1" @click="$router.push('/rolelist')">角色列表</a-menu-item>
              <a-menu-item key="5_2" @click="$router.push('/permisslist')">权限列表</a-menu-item>
              <a-menu-item key="5_3" @click="$router.push('/adminlist')">管理员列表</a-menu-item>
            </a-sub-menu>
            <a-menu-item key="0_2" @click="$router.push('/user')">
              <IconCalendar></IconCalendar>
              用户信息
            </a-menu-item>
          </a-menu>
          <!-- trigger -->
          <template #trigger="{ collapsed }">
            <IconCaretRight v-if="collapsed"></IconCaretRight>
            <IconCaretLeft v-else></IconCaretLeft>
          </template>
        </a-layout-sider>

        <router-view></router-view>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import { IconCaretRight, IconCaretLeft, IconCalendar, IconSun } from '@arco-design/web-vue/es/icon'

export default {
  components: {
    IconCaretRight,
    IconCaretLeft,
    IconCalendar,
    IconSun
  },
  data() {
    return {}
  },
  methods: {
    onClickMenuItem() {},
    qutiHandler() {
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  },
  mounted() {
    const token = localStorage.getItem('token')
    if (!token) {
      this.$message.error('请登录!')
      this.$router.push('/login')
    }
    if (window.location.href.indexOf('#reloaded') == -1) {
      window.location.href = window.location.href + '#reloaded'
      window.location.reload()
    }
  }
}
</script>
<style>
html.dark {
  background-color: #333;
}
</style>
<style scoped>
.layout-demo {
  height: 100vh;
  background: var(--color-fill-2);
  box-sizing: border-box;
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
  height: 5vh;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 5vh;
}
.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}
</style>
